<template>
  <div class="pixiWrap">
    <div class="pixiDom" ref="pixiDom" @contextmenu.prevent="handleRight" :style="{width:currentWidth+'px',height:currentHeight+'px'}"></div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted } from 'vue'

// * 创建pixi 需要导入的
import $ from 'jquery';
import {useByJson}  from '@/pixi/createPixi'


// * 动态容器计算宽高
import {usePixiSize} from '@/hooks/usePixiSize'
let currentWidth = ref(0)
let currentHeight = ref(0)
onMounted(async ()=>{
  // 容器的最大宽度和高度 在@/store/pixi.js 中设置，currentWidth和currentHeight是计算后的数据
  let res = await usePixiSize();
  currentWidth.value = res.currentWidth.value
  currentHeight.value = res.currentHeight.value
})

// 自定义右键 事件
function handleRight(){}

// 点击
function onClick(clickSprite) {
  clickSprite.scale.x *= 1.25;
  clickSprite.scale.y *= 1.25;
}
// 移入
function onButtonOver(clickSprite){
  clickSprite.alpha= 0.5;   // alpha 改变
}
// 移出
function onButtonOut(clickSprite){
  clickSprite.alpha= 1;
}

// pixi的容器
let pixiDom = ref(null)
onMounted( async ()=>{
  console.log('进入pixi')
  let params = {
    app : {
      dom:pixiDom.value, // * dom
      // containerX:0, // 主容器初始中心位置x 默认是0 在容器中心 宽度是容器的一半 打开mouseControle 中的console container中心位置 调试位置
      // containerY:0, // 主容器初始中心位置y 默认是0 在容器中心 高度是容器的一半
      // scaleX:0.8, // 主容器初始缩放x
      // scaleY:0.8, // 主容器初始缩放y
      // rotation:-0.18, // 主容器初始角度
    },
    bgParams : {
      bgImgUrl:"textures/air.png", // * 背景图片地址
      bgContainerCenterX:-136, // 背景容器初始中心位置x 默认是0 在容器中心 打开mouseControle 中的console bgcontainer中心位置 调试位置
      bgContainerCenterY:6, // 背景容器初始中心位置y 默认是0  在容器中心
      bgWidth:1248, // 背景图片的宽度，不设置默认拉伸全部铺满
      bgHeight:797, // 背景图片的高度，不设置默认拉伸全部铺满
    },
    textOptions : [
      {
        content:"Hello World", // * 内容
        x:400,  // * 坐标x
        y:400, // * 坐标y
        // name: 'hello', // 名字
        // style:{
        //   fontFamily: "Arial",
        //   fontSize: 18,
        //   fill: 0xff0000,
        //   align: "center"
        // }
      },
      {content:"测试文字2", name: 'hello2', x:700, y:300, style:{fontFamily: "Arial", fontSize: 18, fill: 0x1f32f0, align: "center",},}
    ],
    imgSpriteArr : [
      {
        url:"textures/button.png", // * 图片地址
        x:200, // * 坐标x
        y:200, // * 坐标y
        width:100, // * 宽度
        height:100, // * 高度
        name:'clickImg', // 精灵名称
        pointerdown: onClick, // 点击事件
        pointerover: onButtonOver, // over事件
        pointerout: onButtonOut, // out事件
        hoverStyle:true, // 默认为true hover增加outline效果
        outStyle:true, // 默认为false
        autoRotate:true, // 默认为false
      },
      {
        url:"image/energy/icon_dian.png",
        x:540,
        y:450,
        width:59,
        height:68,
        name:'clickImg', // 精灵名称
        hoverStyle:true, // 默认为true hover增加outline效果
        outStyle:true, // 默认为false
        autoRotate:false, // 默认为false*
      }
    ],
    dashArr : [
      {
        x0:100, // * 起始点x坐标
        y0:150, // * 起始点y坐标
        x1:400, // * 结束点x坐标
        y1:150, // * 结束点x坐标
        linewidth:4, // 虚线宽
        color:'#ff6633', // 颜色 默认为黑色
      },
      {x0:400,y0:150,x1:500,y1:450,linewidth:4,color:'#ff6633'},
      {x0:500,y0:450,x1:100,y1:450,linewidth:4,color:'#ff6633'},
      {x0:0,y0:0,x1:100,y1:0,linewidth:4,color:'#0159d5'},
      {x0:0,y0:0,x1:0,y1:100,linewidth:4,color:'#f162f5'},
    ],
    pathArr : [
      {
        x0:0, // * 路径起始点x坐标
        y0:0, // * 路径起始点y坐标
        x1:616, // * 路径结束点x坐标
        y1:0, // * 路径结束点y坐标
        line:'line5', // 路径图片的名字，是@/pixi/assets.js 中添加 路径name   * 路径的宽度 只需要修改选用的图片 Pixi.textures.line5  * 路径的背景股票 可以在 @/pixi/assets.js 中添加 路径name
        speed:0.5 // 路径移动速度 默认是1 可以为负数
      },
      {x0:616,y0:0,x1:616,y1:50,line:'line5',speed:0.5},
      {x0:616,y0:50,x1:316,y1:50,line:'line5',speed:0.5}, // speed  默认为1
      {x0:0,y0:100,x1:316,y1:100,line:'line5',speed:0.5},
      {x0:316,y0:100,x1:416,y1:300,line:'line5',speed:0.5},
      {x0:416,y0:300,x1:516,y1:300,line:'line5',speed:0.5},
    ],

    domSprites : [
      $('.demoItem'), // * 通过labelsArr创建出来的 子组件的类名
      $('.demoItem2')
    ],

    mouseParams:{
      showCoord:true // 开启点击显示坐标。 默认不开启false
    },

  }
  let { pixiRef,allDashs,allPaths} =  await useByJson(params)
})


</script>

<style scoped lang="scss">
.pixiWrap{
  position: relative;
  overflow: hidden;
}
</style>
